import React, { useMemo } from "react"
import { useTranslation } from "react-i18next";
import {
    useLocation,
    useNavigate
} from "react-router-dom";
import {
    CloudServerOutlined,
    NodeIndexOutlined,
    MenuUnfoldOutlined,
    ProductOutlined,
    CommentOutlined,
    TeamOutlined,
    BarChartOutlined,
    SettingOutlined,
    InfoCircleOutlined
} from '@ant-design/icons';
import { Menu as AntMenu } from "antd";
// 定义菜单项类型
type MenuItem = {
    key: string;
    icon: React.ReactNode;
    label: string;
    onClick: () => void;
}

const Menu: React.FC = () => {
    const { t } = useTranslation();
    const location = useLocation();
    const navigate = useNavigate();
    // 处理菜单点击
    const handleClick = (path: string) => {
        navigate(path);
    }
    // 缓存menuItems
    const menuItems = useMemo(() => [
        {
            key: 'cluster',
            icon: <CloudServerOutlined />,
            label: t('aside:cluster'),
            onClick: () => handleClick('/cluster'),
        },
        {
            key: 'node',
            icon: <NodeIndexOutlined />,
            label: t('aside:node'),
            onClick: () => handleClick('/node'),
        },
        {
            key: 'producer',
            icon: <ProductOutlined />,
            label: t('aside:producer'),
            onClick: () => handleClick('/producer')
        },
        {
            key: 'consumer',
            icon: <CommentOutlined />,
            label: t('aside:consumer'),
            onClick: () => handleClick('/consumer')
        },
        {
            key: 'group',
            icon: <TeamOutlined />,
            label: t('aside:group'),
            onClick: () => handleClick('/group')
        },
        {
            key: 'monitor',
            icon: <BarChartOutlined />,
            label: t('aside:monitor'),
            onClick: () => handleClick('/monitor')
        },
        {
            key: 'settings',
            icon: <SettingOutlined />,
            label: t('aside:settings'),
            onClick: () => handleClick('/settings'),
        },
        {
            key: 'about',
            icon: <InfoCircleOutlined />,
            label: t('aside:about'),
            onClick: () => handleClick('/about'),
        },
    ], [t]);
    // 缓存selectedKeys
    const selectedKeys = useMemo(() => {
        const path = location.pathname;
        const key = path.split('/')[1] || 'cluster';
        console.log("当前路径：", path, "选中的菜单：", key);
        return [key];
    }, [location.pathname]);
    return (
        <AntMenu
            mode="inline"
            items={menuItems}
            selectedKeys={selectedKeys}
            style={{
                minHeight: '100%',
                paddingBottom: '50px',
            }}
        />
    )
}
export default Menu